{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}

{{ block title() }}Bookmark Labels{{ end }}

{{ block mainContent() -}}

<h1 class="title text-h2">Bookmark Labels</h1>

<p class="mb-4">Labels let your organize your bookmarks the way you want. You can set
anything to a label, including emojis!</p>

<ul class="grid lg:grid-cols-3 xl:grid-cols-4 gap-4">
{{- range .Labels -}}
  <li><a href="{{ urlFor(`/bookmarks/labels`) }}/{{ url(.Name) }}"
   class="h-full flex items-center gap-1 border rounded-xl
   py-2 px-4 font-semibold
   hf:bg-yellow-100"
   >
    <span class="flex-grow [overflow-wrap:anywhere]">{{ .Name }}</span>
    <span class="py-0.5 px-2 bg-gray-200 text-xs rounded-lg">{{ .Count }}</span>
  </a></li>
{{- end -}}
</ul>

{{ end }}
